<script setup>
import { reactive, toRefs } from 'vue'

// toRefs:将某数据(对象中所有属性都)转换成ref数据格式,较少使用，一般配合reactive使用
// 用法：  传入一个对象，它会将对象中的所有属性转换为响应式(它的值的格式类似ref数据格式)
//  const {name,age}=toRefs(userinfo)
// name = {value:'张三'}  age = {value:18}

const userinfo = reactive({
  name: '张三',
  age: 18
})
let { name, age } = toRefs(userinfo)
const add = () => {
  // age++
  // console.log(age)
  age.value++
}
</script>

<template>
  <div class="app-page">
    <h3>{{ name }}</h3>
    <h3>{{ age }}</h3>
    <button @click="add">修改age</button>
  </div>
</template>

<style scoped></style>
